<template>
  <!-- 维护平台角色类型 -->
  <a-row :gutter="24">
    <a-col :sm="24" :md="24" :xl="24">
      <div class="send-display-container">
        <div class="filter-container">
          <template>
            <div>
              <a-button type="primary" @click="add" icon="plus" v-checkBtn="'platform:role:type:add'">
                新增角色类型
              </a-button>
            </div>
          </template>
        </div>
        <a-back-top />
        <div>
          <template>
            <a-table
              :columns="columns"
              :data-source="dataSource"
              bordered
              :loading="loading"
              :rowKey="(record) => { return record.roleTypeId }"
              :scroll="{ x: true }"
              :pagination="pagination">
              <!-- <span slot="action" slot-scope="text, record">
                                <a href="javascript:;" @click="onEdit(record)">编辑</a>
                                <a-divider type="vertical" />
                                <a href="javascript:;" @click="onDel(record)">删除</a>
                            </span> -->
            </a-table>
          </template>
        </div>
      </div>
      <saveModal ref="saveModal" v-if="dialog.save" @success="tableData" @close="dialog.save = false"></saveModal>
    </a-col>
  </a-row>
</template>

<script>

import { getRoleTypes } from '@/api/base'
import saveModal from './save'

export default {
    components: { saveModal },
    data () {
        return {
            resourceTypeList: [{ value: 1, name: '菜单项' }, { value: 2, name: '页面' }, { value: 3, name: '操作' }, { value: 4, name: '访问接口' }],
            columns: [
                {
                    title: '角色类型',
                    dataIndex: 'name',
                    key: 'name',
                    align: 'center',
                    maxWidth: 200
                },
                {
                    title: '备注',
                    dataIndex: 'description',
                    key: 'description',
                    width: 250,
                    align: 'center'
                }
                // {
                //     title: '操作',
                //     width: '150px',
                //     dataIndex: 'action',
                //     align: 'center',
                //     fixed: 'right',
                //     width: 150,
                //     scopedSlots: { customRender: 'action' }
                // }
            ],
            dataSource: [],
            dialog: {
                save: false
            },
            pagination: {
                // 分页配置
                pageSize: 6, // 每页显示的条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 10, // 总条数
                name: '',
                description: '',
                onChange: this.handlePageChange // 页码改变时的回调函数
            }
        }
    },
    created () {
        this.tableData()
    },
    methods: {
        // 搜索
        onSearch () {
            this.pagination.current = 1
            this.pagination.pageSize = 6
            this.tableData()
        },
        // 重置
        onReset () {
            this.pagination = {
                // 分页配置
                pageSize: 6, // 每页显示的条数
                showQuickJumper: true, // 是否可以快速跳转到指定页
                showTotal: total => `共 ${total} 条`, // 显示总条数和当前数据范围
                current: 1, // 当前页数
                total: 10, // 总条数
                name: '',
                description: '',
                onChange: this.handlePageChange // 页码改变时的回调函数
            }
            this.tableData()
        },
        // 访问资源类型
        onResourceType (e) {
            this.pagination.resourceType = e
        },
        handlePageChange (page, pageSize) {
            this.pagination.current = page
            this.tableData()
        },
        // 新增
        add () {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open()
            })
        },
        // 编辑
        onEdit (row) {
            this.dialog.save = true
            this.$nextTick(() => {
                this.$refs.saveModal.open('edit').setData(row)
            })
        },
        onClosed () {
            this.dialog.save = false
        },
        tableData () {
            this.loading = true
            this.dialog.save = false
            getRoleTypes(this.pagination).then(res => {
                if (res.code == 200) {
                    this.dataSource = res.data.datas
                    this.pagination.total = res.data.total
                }
                this.loading = false
            })
        }

        // onDel(menuId) {
        //     deleteResourceInfo({ 'menuId': menuId }).then(res => {
        //         if (res.retCode === 0) {
        //             this.$notification['success']({
        //                 message: '提示',
        //                 description: '删除成功！',
        //                 duration: 8
        //             })
        //             this.onQuery()
        //         } else {
        //             this.$notification['error']({
        //                 message: '提示',
        //                 description: res.retMsg,
        //                 duration: 8
        //             })
        //         }
        //     })
        // }
    }
}
</script>

<style scoped lang="less" >
.send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
}

.filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
        padding-right: 20px;

        white-space: nowrap;
    }

    .input-container {
        width: 300px;
        margin-right: 20px
    }

    .btn {
        margin-right: 20px;
    }
}

/deep/ .ant-modal {
    min-width: 700px;
    margin-left: 30%;
}
</style>
